<template>
  <div class="dashboard-container" style="">
    <el-main>
      <!--  顶部提示信息 -->
      <div style="display: flex;justify-content: space-between;background-color: #fff;">
        <div style="margin-right: 5px;width: 25%;" class="top1">
          <i class="el-icon-eleme" style="color: #F15921;"></i>
          <span style="color: #fff;font-size: 17px;font-weight: bold;padding-left: 10px;">累计API访问</span>
          <div style="color: #fff;font-size: 35px;font-weight: bold;padding-left: 50px;padding-top: 27px;">
            {{apiStatisticesTotalCount}} <span style="font-size: 15px;">次</span>
          </div>
          <div style="color: #fff;font-size: 13px;padding-top: 5px;">
            周访问量: {{apiStatistices}}
          </div>
          <div style="color: #fff;font-size: 13px;padding-top: 5px;">
            同比增长: 5%
          </div>
        </div>
        <div style="margin: 0 5px;width: 25%;" class="top2">
          <i class="el-icon-eleme" style="color: #F15921;"></i>
          <span style="color: #fff;font-size: 17px;font-weight: bold;padding-left: 10px;">累计登陆</span>
          <div style="color: #fff;font-size: 35px;font-weight: bold;padding-left: 50px;padding-top: 27px;">
            {{loginTotalCount}} <span style="font-size: 15px;">次</span>
          </div>
          <div style="color: #fff;font-size: 13px;padding-top: 5px;">
            本周登陆: {{weekLoginCount}}
          </div>
          <div style="color: #fff;font-size: 13px;padding-top: 5px;">
            同比增长: 3%
          </div>
        </div>
        <div style="margin: 0 5px;width: 25%;" class="top3">
          <i class="el-icon-eleme"></i>
          <span style="color: #fff;font-size: 17px;font-weight: bold;padding-left: 10px;">计费接口访问</span>
          <div style="color: #fff;font-size: 35px;font-weight: bold;padding-left: 50px;padding-top: 27px;">
            2234 <span style="font-size: 15px;">次</span>
          </div>
          <div style="color: #fff;font-size: 13px;padding-top: 5px;">
            周访问量: 22
          </div>
          <div style="color: #fff;font-size: 13px;padding-top: 5px;">
            同比增长: 2%
          </div>
        </div>
        <div style="margin: 0 5px;width: 25%;" class="top4">
          <i class="el-icon-eleme"></i>
          <span style="color: #fff;font-size: 17px;font-weight: bold;padding-left: 10px;">消息推送总量</span>
          <div style="color: #fff;font-size: 35px;font-weight: bold;padding-left: 50px;padding-top: 27px;">
            2312 <span style="font-size: 15px;">次</span>
          </div>
          <div style="color: #fff;font-size: 13px;padding-top: 5px;">
            周访问量: 55
          </div>
          <div style="color: #fff;font-size: 13px;padding-top: 5px;">
            同比增长: 6%
          </div>
        </div>
      </div>

      <!-- gitee start信息 -->
      <div style="width: 100%; background-color: #F4F4F5;margin-top: 10px;">
        <div style="background-color: #F4F4F5; display: flex;">
          欢迎大家来start 和fork本项目😋
          <a src="http://www.baidu.com" style="color: #42B983;">
            gitee 地址
          </a>
        </div>




      </div>

      <div style="display: flex;">
        <!-- 本月访问 -->

        <div id="main" style="height: 302px;width: 65%;">

        </div>
        <!--  访问人群分布 -->
        <div id="main2" style="height: 302px;width: 30%;">

        </div>

      </div>
      <span style="color: #ED8969;"> 随机展示</span></span>
      <div style="display: flex;">
        <!--  功能热点 -->
        <div id="main4" style="height:20vh;width: 50%"></div>
        <!--  词云图 技术描述 -->

        <div id="main3" style="height:20vh;width: 50%"></div>

      </div>

    </el-main>
    <!-- <component :is="currentRole" /> -->
  </div>
</template>

<script>

  import {

    statisticsApi
  } from "@/api/statistics";
  import * as echarts from 'echarts';
  // import * as echarts from 'echarts';
  import 'echarts-wordcloud';
  // option = {
  //   xAxis: {
  //     type: 'category',
  //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  //   },
  //   yAxis: {
  //     type: 'value'
  //   },
  //   series: [
  //     {
  //       data: [150, 230, 224, 218, 135, 147, 260],
  //       type: 'line'
  //     }
  //   ]
  // };
  // option && myChart.setOption(option);
  export default {
    name: 'Dashboard',
    mounted() {
      this.drawChart();
      this.drawChart2();
      this.drawChart3();
      this.drawChart4();
    },

    methods: {
      async search() {


        let res = await statisticsApi.getStatistics()
        console.log(res)
        this.loginTotalCount = res.data.loginTotalCount
        this.weekLoginCount = res.data.weekLoginCount
        this.apiStatistices = res.data.apiStatistices
        this.apiStatisticesTotalCount = res.data.apiStatisticesTotalCount
        // apiStatisticesTotalCount
      },
      //  功能热点
      drawChart4() {
        var chart = echarts.init(document.getElementById('main4'));
        chart.setOption(
          {
            title: {
              text: '功能热点'
            },
            tooltip: {
              show: true,
              trigger: 'item',
              formatter: function (params) {
                return params.name
              }
            },
            series: [{
              type: 'wordCloud',
              // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
              shape: 'circle',
              // 这个功能还没用过
              keepAspect: false,
              // 这个是可以自定义背景图片的，词云会按照图片的形状排布，所以有形状限制的时候，最好用背景图来实现，而且，这个背景图一定要放base64的，不然词云画不出来
              //maskImage: maskImage,
              // 下面就是位置的配置
              left: 'center',
              top: 'center',
              width: '70%',
              height: '80%',
              right: null,
              bottom: null,
              // 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
              sizeRange: [15, 30],
              // 每个词旋转的角度范围
              rotationRange: [0, 0],
              rotationStep: 45,
              // 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字
              gridSize: 20,
              // 允许词太大的时候，超出画布的范围
              drawOutOfBound: false,
              // 布局的时候是否有动画
              layoutAnimation: true,
              // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
              textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                // 颜色可以用一个函数来返回字符串
                color: function () {
                  // Random color
                  return 'rgb(' + [
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255)
                  ].join(',') + ')'
                }
              },
              //提示框是否强调显示
              /*emphasis: {
                focus: 'self',
                textStyle: {
                  textShadowBlur: 10,
                  textShadowColor: '#333'
                }
              },*/
              // 数据必须是一个数组，数组是对象，对象必须有name和value属性
              data: [
                {
                  name: 'RBAC',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: '支持所有云上传',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: '基于git diff的数据变更记录',
                  value: Math.round(Math.random() * 1000),
                }, {
                  name: '丰富的日志采集系统',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: '心跳机制',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: 'POP-reload为系统预留钩子',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: '基于SpringEvent的超强解耦日志收集',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: '支持大文件上传，断网续传',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: 'manager层',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: '扩展能力超群的SPI可插拔插件',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: '采用主流技术，利于二次开发',
                  value: Math.round(Math.random() * 1000),
                },
              ],
            }]
          }
        )


      },
      // 词云图 技术描述
      drawChart3() {
        var chart = echarts.init(document.getElementById('main3'));
        chart.setOption(
          {
            title: {
              text: "技术热点"
            },
            series: [{
              type: 'wordCloud',

              // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆

              shape: 'circle',

              // Keep aspect ratio of maskImage or 1:1 for shapes
              // This option is supported since echarts-wordcloud@2.1.0
              keepAspect: false,

              // 这个是可以自定义背景图片的，词云会按照图片的形状排布，所以有形状限制的时候，最好用背景图来实现，而且，这个背景图一定要放base64的，不然词云画不出来
              // maskImage: maskImage,

              // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
              // Default to be put in the center and has 75% x 80% size.

              // 下面就是位置的配置
              left: 'center',
              top: 'center',
              width: '70%',
              height: '80%',
              right: null,
              bottom: null,

              // Text size range which the value in data will be mapped to.
              // Default to have minimum 12px and maximum 60px size.

              // 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
              sizeRange: [12, 30],

              // 每个词旋转的角度范围
              rotationRange: [0, 0],
              rotationStep: 45,

              // 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字
              gridSize: 20,



              // 允许词太大的时候，超出画布的范围
              drawOutOfBound: false,
              // 允许词太大的时候，超出画布的范围
              shrinkToFit: false,

              // 布局的时候是否有动画
              layoutAnimation: true,
              // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
              textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                // 颜色可以用一个函数来返回字符串
                color: function () {
                  // Random color
                  return 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                  ].join(',') + ')';
                }
              },



              //提示框是否强调显示
              emphasis: {
                focus: 'self',

                textStyle: {
                  textShadowBlur: 10,
                  textShadowColor: '#333'
                }
              },

              // 数据必须是一个数组，数组是对象，对象必须有name和value属性
              data: [
                {
                  name: 'Spring Boot',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: 'Minio',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: 'Mybatis Plus',
                  value: Math.round(Math.random() * 1000),
                }, {
                  name: 'MySql',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: 'Redis',
                  value: Math.round(Math.random() * 1000),
                },

                {
                  name: 'Jenkins',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: 'Docker',
                  value: Math.round(Math.random() * 1000),
                },

                {
                  name: 'Vue',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: 'Element ',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: 'Echarts',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: 'Animate',
                  value: Math.round(Math.random() * 1000),
                },
                {
                  name: 'Spring Security',
                  value: Math.round(Math.random() * 1000),
                },





              ]
            }]
          });

      },
      // 访问人群图 
      drawChart2() {
        let myChart = echarts.init(document.getElementById("main2"));
        console.log(myChart)

        let option = {
          color: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'],
          title: {
            text: '访问人群分布',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '城市',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: '北京' },
                { value: 735, name: '河南' },
                { value: 580, name: '安徽' },
                { value: 484, name: '广州' },

              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        option && myChart.setOption(option);

      },
      // left 访问量
      drawChart() {
        console.log(echarts)
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        let myChart = echarts.init(document.getElementById("main"));
        // 指定图表的配置项和数据
        // let option = {
        //   title: {
        //     text: "ECharts 入门示例",
        //   },
        //   tooltip: {},
        //   legend: {
        //     data: ["销量"],
        //   },
        //   xAxis: {
        //     data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        //   },
        //   yAxis: {},
        //   series: [
        //     {
        //       name: "销量",
        //       type: "bar",
        //       data: [5, 20, 36, 10, 10, 20],
        //     },
        //   ],
        // };
        let option = {
          title: {
            text: '每天访问人数',
            subtext: 'Fake Data',
            left: 'left'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              smooth: true
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    },
    data() {
      return {
        apiStatisticesTotalCount: 0,  // api周访问次数
        apiStatistices: 0, // api访问次数
        loginTotalCount: 0,  // 总登录次数
        weekLoginCount: 0    // 每周的登录次数
      }
    },
    computed: {

    },
    created() {





      this.search()
    }
  }
</script>
<style>
  .top1 {

    border-radius: 4px;
    padding: 15px 15px 5px;
    background-color: #42A8F7;
    background-image: linear-gradient(to right, #5A72FD, #C17AFD);
    transition: all 0.4s;
  }

  .top1:hover {
    cursor: pointer;
    background-color: #EA6B7A;
    /* background-color: red !important; */
    /* color: #ddd; */
    transform: scale(1.1);
  }

  .top2:hover {
    cursor: pointer;
    /* background-color: #EA6B7A; */
    /* background-color: red !important; */
    /* color: #ddd; */
    transform: scale(1.1);
  }

  .top3:hover {
    cursor: pointer;
    /* background-color: #EA6B7A; */
    /* background-color: red !important; */
    /* color: #ddd; */
    transform: scale(1.1);
  }

  .top4:hover {
    cursor: pointer;
    /* background-color: #EA6B7A; */
    /* background-color: red !important; */
    /* color: #ddd; */
    transform: scale(1.1);
  }

  .top2 {
    border-radius: 4px;
    padding: 15px 15px 5px;
    transition: all 0.4s;
    background-image: linear-gradient(to right, #42A8F7, #6E80FC)
  }

  .top3 {
    padding: 15px 15px 5px;
    transition: all 0.4s;

    border-radius: 4px;

    background-image: linear-gradient(to right, #EA6B7A, #EF9662)
  }

  .top4 {
    padding: 15px 15px 5px;

    border-radius: 4px;
    transition: all 0.4s;

    background-image: linear-gradient(to right, #4CD996, #A0E162)
  }
</style>